<template>
  <view class="container">
    <!-- 全局加载反馈 -->
    <view class="loading-mask" v-if="loading">
      <image src="/static/loading.gif" class="loading-img" />
      <text class="loading-text">加载中...</text>
    </view>

    <view class="content" v-else>
      <!-- 个人中心标题 -->
     

      <!-- 用户信息区 -->
      <view class="user-info">
        <image :src="userInfo.avatar" class="avatar" mode="aspectFill"></image>
        <text class="nickname">{{ userInfo.nickname }}</text>
        <text class="bio">{{ userInfo.bio }}</text>
        <view class="level-exp">
          <text>等级：{{ userInfo.level }}</text>
          <text>经验值：{{ userInfo.exp }}</text>
        </view>
      </view>

      <!-- 我的文章模块（带Tab切换） -->
      <view class="module-card">
        <text class="module-title">我的文章</text>
        <uni-tabs 
          :current="articleTab" 
          @change="onArticleTabChange" 
          mode="line" 
          active-color="#2979ff"
        >
          <uni-tab-bar>
            <uni-tab-bar-item>已发布</uni-tab-bar-item>
            <uni-tab-bar-item>草稿箱</uni-tab-bar-item>
            <uni-tab-bar-item>已收藏</uni-tab-bar-item>
          </uni-tab-bar>
          <uni-tab-content>
            <!-- 已发布 -->
            <uni-tab-pane>
              <view class="article-list">
                <template v-if="publishedArticles.length">
                  <navigator 
                    class="article-item" 
                    v-for="(article, index) in publishedArticles" 
                    :key="index" 
                    :url="`/pages/article/detail?id=${article.id}`"
                  >
                    <image 
                      v-if="article.thumbnail" 
                      :src="article.thumbnail" 
                      class="article-thumb"
                    />
                    <view class="article-info">
                      <text class="article-title">{{ article.title }}</text>
                      <text class="article-desc">{{ article.desc }}</text>
                    </view>
                  </navigator>
                </template>
                <template v-else>
                  <view class="empty-tip">暂无已发布文章</view>
                </template>
              </view>
            </uni-tab-pane>

            <!-- 草稿箱 -->
            <uni-tab-pane>
              <view class="article-list">
                <template v-if="draftArticles.length">
                  <view class="article-item" v-for="(article, index) in draftArticles" :key="index">
                    <image 
                      v-if="article.thumbnail" 
                      :src="article.thumbnail" 
                      class="article-thumb"
                    />
                    <view class="article-info">
                      <text class="article-title">{{ article.title }}</text>
                      <text class="article-desc">{{ article.desc }}</text>
                    </view> 
                  </view>
                </template>
                <template v-else>
                  <view class="empty-tip">暂无草稿内容</view>
                </template>
              </view>
            </uni-tab-pane>

            <!-- 已收藏 -->
            <uni-tab-pane>
              <view class="article-list">
                <template v-if="collectedArticles.length">
                  <navigator 
                    class="article-item" 
                    v-for="(article, index) in collectedArticles" 
                    :key="index" 
                    :url="`/pages/article/detail?id=${article.id}`"
                  >
                    <image 
                      v-if="article.thumbnail" 
                      :src="article.thumbnail" 
                      class="article-thumb"
                    />
                    <view class="article-info">
                      <text class="article-title">{{ article.title }}</text>
                      <text class="article-desc">{{ article.desc }}</text>
                    </view>
                  </navigator>
                </template>
                <template v-else>
                  <view class="empty-tip">暂无收藏文章</view>
                </template>
              </view>
            </uni-tab-pane>
          </uni-tab-content>
        </uni-tabs>
      </view>

      <!-- 互动记录模块 -->
      <view class="module-card">
        <text class="module-title">互动记录</text>
        <view class="interaction-list">
          <template v-if="interactionRecords.length">
            <view class="interaction-item" v-for="(record, index) in interactionRecords" :key="index">
              <text class="interaction-time">{{ record.time }}</text>
              <text class="interaction-content">{{ record.content }}</text>
            </view>
          </template>
          <template v-else>
            <view class="empty-tip">暂无互动记录</view>
          </template>
        </view>
      </view>

      <!-- 账号设置模块 -->
      <view class="module-card">
        <text class="module-title">账号设置</text>
        <view class="setting-list">
          <navigator 
            class="setting-item" 
            v-for="(setting, index) in settingsOptions" 
            :key="index" 
            :url="setting.url"
          >
            <image :src="setting.icon" class="setting-icon"></image>
            <text class="setting-name">{{ setting.name }}</text>
            <image src="/static/icons/arrow-right.png" class="arrow-icon"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true, // 全局加载状态
      userInfo: {
        avatar: '/static/profile/default_user.png',
        nickname: '用户昵称',
        bio: '暂无个性签名',
        level: 1,
        exp: 100
      },
      articleTab: 0,
      publishedArticles: [],
      draftArticles: [],
      collectedArticles: [],
      interactionRecords: [],
      settingsOptions: [
        { 
          name: '修改密码', 
          icon: '/static/profile/password.png', 
          url: '/pages/settings/password' 
        },
        { 
          name: '账号绑定', 
          icon: '/static/profile/bind.png', 
          url: '/pages/settings/bind' 
        },
        { 
          name: '隐私设置', 
          icon: '/static/profile/settings.png', 
          url: '/pages/settings/privacy' 
        }
      ]
    }
  },
  onLoad() {
    // 模拟异步加载（实际项目替换为API请求）
    setTimeout(() => {
      this.loadUserData();
      this.loadArticles();
      this.loadInteractions();
      this.loading = false;
    }, 1500);
  },
  methods: {
    loadUserData() {
      // 示例：从缓存/API获取用户信息
      console.log('加载用户数据...');
    },
    loadArticles() {
      // 模拟文章数据
      this.publishedArticles = [
        { 
          id: 1,
          title: '我的第一篇技术博客', 
          desc: '分享Vue3开发技巧...', 
          thumbnail: '/static/profile/blog.png' 
        },
        { 
          id: 2,
          title: '生活随笔：春日游记', 
          desc: '记录春日踏青的美好...', 
          thumbnail: '' 
        }
      ];
      this.draftArticles = [
        { 
          id: 3,
          title: '草稿：未完成的设计思路', 
          desc: '关于UI组件库的规划...', 
          thumbnail: '/static/profile/design.png' 
        }
      ];
      this.collectedArticles = [
        { 
          id: 4,
          title: '前端性能优化指南', 
          desc: '深入讲解性能优化技巧...', 
          thumbnail: '' 
        }
      ];
    },
    loadInteractions() {
      // 模拟互动记录
      this.interactionRecords = [
        { 
          time: '2025-06-06 10:12', 
          content: '用户点赞了你的文章《我的第一篇技术博客》' 
        },
        { 
          time: '2025-06-05 16:45', 
          content: '用户评论：“写得很详细，受益良多！”' 
        }
      ];
    },
    onArticleTabChange(e) {
      this.articleTab = e.detail.current;
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
}

/* 加载反馈 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.loading-img {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}
.loading-text {
  font-size: 28rpx;
  color: #666;
}

/* 内容区域 */
.content {
  display: flex;
  flex-direction: column;
}

/* 个人中心标题 */
.user-info-header {
  text-align: center;
  margin-bottom: 20rpx;
}
.user-info-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

/* 用户信息区 */
.user-info {
  text-align: center;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}
.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin: 0 auto 20rpx;
  object-fit: cover; /* 优化头像裁剪 */
}
.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}
.bio {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.level-exp {
  font-size: 24rpx;
  color: #666;
}

/* 模块卡片通用样式 */
.module-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.module-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

/* 文章列表 */
.article-list {
  padding: 20rpx 0;
}
.article-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  text-decoration: none; /* 清除navigator默认下划线 */
}
.article-thumb {
  width: 120rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  object-fit: cover;
}
.article-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  overflow: hidden;
}

/* 互动记录 */
.interaction-list {
  padding: 20rpx 0;
}
.interaction-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  font-size: 24rpx;
}
.interaction-time {
  color: #999;
  min-width: 160rpx;
}
.interaction-content {
  flex: 1;
  color: #666;
  margin-left: 20rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 账号设置 */
.setting-list {
  padding: 10rpx 0;
}
.setting-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;
  text-decoration: none;
}
.setting-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}
.arrow-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: auto;
  object-fit: cover;
}

/* 空状态提示 */
.empty-tip {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
  font-size: 24rpx;
}
</style>